@extends('plane')

@section('body')
	<!-- WRAPPER -->
	<div id="wrapper">
	
		<!-- SIDEBAR -->
		<div id="sidebar">
			@include('sidebar')
		</div>
		<!-- ENDS SIDEBAR -->
		
		<!-- MAIN -->
		<div id="main">

			<!-- HEADER -->
			<div id="header">
				<div id="page-title">The blog</div>
				<!-- Breadcrumb-->
				<div id="breadcrumbs">
					You are here: 
					<a title="Home" href="#">Home</a> &raquo; 
					<a title="Features" href="#">Blog</a>
				</div>
				<!-- ENDS Breadcrumb-->	
			</div>
			<!-- ENDS HEADER -->
			
			<!-- CONTENT -->
			<div id="content">
						
				<!-- PAGE CONTENT -->
				<div id="page-content">
				
					<!-- Posts -->
					@foreach($articels as $articel)
					<div class="post">
						<h1><a href="single.html">{{ $articel->title }}</a></h1>
						<!-- meta -->
						<ul class="meta">
							<li>By <a href="#">{{ $articel->author }}</a>&nbsp;</li> 
							<li> {{ date('Y-m-d H:i:s',$articel->add_time) }} &nbsp;</li>
						</ul>
						<!-- ENDS meta -->
						<!-- feature image -->
<!-- 						<div class="feature-image">
							<a href="single.html"><img src="img/dummies/584x300.jpg" alt="Feature image" /></a>
						</div> -->
						<!-- ENDS feature image -->
						<div class="the-excerpt">
							{{ mb_substr($articel->content,0,400) }}.....
						</div>
						<a href="{{ route('articel.show',$articel->id) }}" class="link-button"><span>Read more</span></a>
					</div>
					@endforeach
					<!-- ENDS posts -->
					
					<!-- Pagination -->
<!-- 					<ul class='pager'>
						<li class="first-child"><a href="#">prev</a></li>
						<li class="active"><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">5</a></li>
						<li class="last-child"><a href="#">next</a></li>
					</ul> -->

					{{ $articels->appends(['id' => $category_id])->render() }}
					<!-- ENDS Pagination -->
	
					
				</div>
				<!-- ENDS PAGE-CONTENT -->
			
			</div>
			<!-- ENDS CONTENT -->
			
		</div>
		<!-- ENDS MAIN -->
	</div>
	<!-- ENDS WRAPPER -->

	<!-- FOOTER -->
	<div id="footer">
		@include('foot')
	</div>
	<!-- ENDS FOOTER -->

	<script type="text/javascript">
		$('.pagination').removeClass().addClass('pager');
		$('.active').html();
	</script>
@stop